<script setup lang="ts">
import { useAppStore } from '@/store';
import Tools from '@/utils/tools';

interface IProps {
  data: IProductInformation;
  count?: number;
  hasSku?: boolean;
}
const props = defineProps<IProps>();
const store = useAppStore();
const shoppingCart = ref<IProductInformation[]>(store.$state.shoppingCart);

onUnmounted(() => {
  unsubscribe();
});

// store全局监听
const unsubscribe = store.$subscribe((mutation, storeState) => {
  if (Array.isArray(mutation.events)) return;
  if (mutation.events.key === 'shoppingCart') {
    shoppingCart.value = storeState.shoppingCart;
  }
});
</script>

<template>
  <view class="w-full pt-4px">
    <view v-if="Tools.hasActiveRange(props.data, shoppingCart, props.count || 0, props.hasSku || false)" class="px-4px py-1px rounded-4px border-1px border-red border-solid text-red inline-flex items-center c-text-10">
      <i class="i-fa:tags mr-2px" /> {{ ((props.data.active.activePrice / (props.hasSku ? props.data.salePrice : props.data.price)) * 10).toFixed(2) }}折，限{{ props.data.active.maxNum }}份
    </view>
    <view v-else-if="props.data.salePrice !== props.data.price" class="px-4px py-1px rounded-4px border-1px border-red border-solid text-red inline-flex items-center c-text-10">
      <i class="i-fa:tags mr-2px" /> {{ ((props.data.salePrice / props.data.price) * 10).toFixed(2) }}折
    </view>
    <text v-else />
  </view>
</template>
